import { forwardRef, useImperativeHandle, useRef } from "react"

const Son=forwardRef((props,ref)=>{
    return <input type="text" ref={ref} />
})

const Son2=forwardRef((props,ref)=>{
    // 子组件中定义的方法
    const funcInSon=()=>{console.log('function-in-son')}
    useImperativeHandle(ref,()=>{
        return (
            // 暴露出去
            {funcInSon}
        )
    })
    return <input type="text" />
})


const ForwardRef=()=>{
    const sonRef=useRef(null)
    // const showRef=()=>{
    //     console.log(sonRef)
    //     sonRef.current.focus()
    // }
    const showRef2=()=>{
        console.log(sonRef)
        sonRef.current.funcInSon()
    }
    return(
        <div>
            {/* <Son ref={sonRef}></Son> */}
            {/* <button onClick={showRef}>focus</button> */}
            <Son2 ref={sonRef}></Son2>
            <button onClick={showRef2}>do func from son</button>
        </div>
    )
}

export default ForwardRef